<template>
  <view class="container">
    <!-- 订单信息展示 -->
    <view class="order-details">
      <view class="order-item">
        <text class="label">商店名称:</text>
        <text class="value">{{ orderData.shopName }}</text>
      </view>
      <view class="order-item">
        <text class="label">商店地址:</text>
        <text class="value">{{ orderData.shopAddress }}</text>
      </view>
      <view class="order-item">
        <text class="label">车型:</text>
        <text class="value">{{ orderData.car.model }} ({{ orderData.car.plate }})</text>
      </view>
      <view class="order-item">
        <text class="label">优惠券:</text>
        <text class="value" v-if="orderData.selectedCoupon">
          {{ orderData.selectedCoupon.name }}（-￥{{ orderData.selectedCoupon.discountAmount }}）
        </text>
        <text class="value" v-else>无优惠券</text>
      </view>
      <view class="order-item" v-for="(service, index) in orderData.selectedServices" :key="index">
        <text class="label">服务项目 {{ index + 1 }}:</text> <!-- 修改了这里 -->
        <text class="value">{{ service.name }}（￥{{ service.discountPrice }}）</text>
      </view>
      <view class="order-item">
        <text class="label">支付金额:</text>
        <text class="value">￥{{ orderData.totalAmount }}</text>
      </view>
      <view class="order-item">
        <text class="label">订单时间:</text>
        <text class="value">{{ orderData.orderTime }}</text>
      </view>
    </view>

    <!-- 返回按钮 -->
    <view class="back-button">
      <button @click="goBack">返回</button>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 存储订单数据
const orderData = ref({});

// 页面加载时获取缓存中的订单数据
onMounted(() => {
  const cachedOrderData = uni.getStorageSync('orderDetails');
  console.log(cachedOrderData)
  if (cachedOrderData) {
    orderData.value = cachedOrderData;
  } else {
    uni.showToast({ title: '订单信息未找到', icon: 'none' });
  }
});

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f5f5f5;
}

.order-details {
  margin-bottom: 30px;
}

.order-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
}

.label {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.value {
  font-size: 16px;
  color: #666;
}

.back-button {
  display: flex;
  justify-content: center;
}

button {
  padding: 10px 20px;
  background-color: #FF4D4F;
  color: white;
  border-radius: 5px;
  border: none;
  font-size: 16px;
  cursor: pointer;
}
</style>
